<template>
  <Card shadow>
    <div style="width: 300px;padding-top: 20px;padding-bottom: 20px;">
      <Form ref="formValidate"
            :model="form"
            :label-width="100">
        <FormItem label="用户名"
                  prop="name">
          <Input v-model="form.name"
                 clearable
                 style="width: 200px"
                 size="large"
                 placeholder="请输入用户名"></Input>
        </FormItem>
        <FormItem label="旧密码"
                  prop="oldPassword">
          <Input v-model="form.oldPassword"
                 type="password"
                 clearable
                 style="width: 200px"
                 placeholder="请输入旧密码"
                 size="large"></Input>
        </FormItem>
        <FormItem label="新密码"
                  prop="newPassword">
          <Input v-model="form.newPassword"
                 type="password"
                 clearable
                 style="width: 200px"
                 placeholder="请输入新密码"
                 size="large"></Input>
        </FormItem>
      </Form>

      <cus-button style="margin-left: 100px;"
                  @onClick="onSubmit">确认修改</cus-button>
    </div>
  </Card>
</template>

<script>
import { modifyUserInfo, getUserBaseInfo } from '@/api/business/system'

export default {
  name: 'personal_page',
  data () {
    return {
      form: {
        name: '',
        oldPassword: '',
        newPassword: ''
      }
    }
  },
  mounted () {
    this.form.name = this.vuex_user.base.name
  },
  methods: {
    onSubmit () {
      if (this.form.newPassword || this.form.oldPassword) {
        if (!(this.form.newPassword && this.form.oldPassword)) {
          return this.$Message.error('修改密码时,新旧密码都为必填')
        }
      }
      this.$cu.dialog({
        content: '确认修改?'
      }).then(() => {
        this.$Spin.show()
        this.modifyUserInfoApi().then(() => this.getUserBaseInfo())
      })
    },
    modifyUserInfoApi () {
      return new Promise(resolve => {
        modifyUserInfo({
          name: this.form.name,
          oldPassword: this.form.oldPassword,
          newPassword: this.form.newPassword
        }).then(res => {
          if (res.code === 1) {
            this.$Message.success('编辑成功')
            this.$Spin.show()
            resolve()
          }
        })
      })
    },
    getUserBaseInfo () {
      return new Promise(resolve => {
        getUserBaseInfo({}).then(res => {
          if (res.code === 1) {
            res.data.token = this.vuex_user.token
            this.$store.commit('$uStore', {
              name: 'vuex_user', value: res.data
            })
            resolve()
          }
        })
      })
    }
  }
}
</script>

<style lang="less">
</style>
